<style scoped>
    .box{width: 100%;height: 100%;}
    .box .max{width: 95%;height: 70px;display: flex;float: left;margin: 5px auto;}
    .box .max .minl{width: 70%;height: 70px;border: #c1ab96 1px solid;}
    .box .max .minr{width: 30%;height: 70px;background-color: #c1ab96;border: #c1ab96 1px solid;cursor: pointer;}
    .p1{font-size: 18px;font-weight: bold;margin: 12px;text-align: center;}
    .p2{font-size: 14px;margin: 10px;text-align: center;}
    .p3 span{text-align: right;font-size: 20px;font-weight: bold;color: white;}
    .p3{text-align: right;color: white;margin: 12px;}
    .p4{font-size: 15px;font-weight: bold;text-align: right;color: white;margin: 12px;}
</style>
<template>
    <div class="box">
        <van-nav-bar
        title="领卷中心"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class="max" v-for="item in clist" :key="item.id">
            <div class="minl">
                <p class="p1">OMINI.BASS官方旗舰店</p>
                <p class="p2">有效期：2019.07.01 - 2019.07.31</p>
            </div>
            <div class="minr" @click="get(item.id)">
                <p class="p3">￥<span>10</span></p>
                <p class="p4">{{item.name}}</p>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
let clist=reactive([
    {id:1,name:'立即领取'},
    {id:2,name:'立即领取'},
    {id:3,name:'立即领取'},
    {id:4,name:'立即领取'},
    {id:5,name:'立即领取'},
])
let get=(item:number)=>{
    clist[item-1].name='已领取'
}
const onClickLeft = () => history.back()
</script>